<template>

	<div  class="find-index mescroll" id="mescroll" style="height: 100%;" ref="totop">
		<div class='conformity flex flex-item-between' v-bind:style="{marginTop: marginrpx+'rem'}">
			<div class='conformity-item flex flex-r flex-item-center'>
				<div class='conformity-message flex flex-item-l-center'>
					<div class='conformity-message-box flex flex-item-center' @click="toMessage">
						<div class='messagenumber' v-if='find.count ? false:true'>{{find.count}}</div>
						<div style='background-image:url(https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/messages.png)' class='icon search-icon'></div>
					</div>
				</div>
				<div class='conformity-search flex flex-item-l-center'>
					<div class='conformity-search-box flex flex-item-center' @click="toSearch">
						<div style='background-image:url(https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/searchIcon.png)' class='icon search-icon'></div>
					</div>
				</div>
			</div>

			<div v-if="find.creditAmount.status == 2&&find.creditAmount.temp" class='flex flex-r flex-item-center'>
				<div class='usable'>
					您的可用额度:
				</div>
				<div class='money'>￥{{find.creditAmount.textstring}}</div>
			</div>

			<div v-else-if="(find.creditAmount.status == 0||find.creditAmount.status == 3)&&find.creditAmount.temp" class='flex flex-r flex-item-center'>
				<div class='flex flex-r flex-item-center'>
					<div class='usable'>申请额度</div>
					<div class='usable' style='margin-left:.08rem;'>免息分期</div>
				</div>
				<div class='btn-allowance' @click="MashanghuaIndex">
					<button class='flex'>去申请</button>
				</div>
			</div>
			<div v-else class='flex flex-r flex-item-center'>
				<div>{{find.creditAmount.status == 1 ? '额度正在审核中':'正在查询额度'}}</div>
			</div>
		</div>
		<div class="hb-find-sh">
			<ul>
				<li class="find-sh-one">
					<img src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs-h5/home-logo.png" />
					<div class="sh-center" @click="toSearch">
						iphone 8
					</div>
					<div class="sh-msg" @click="toMessage">
						<img src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/messages.png" />
						<span v-show="find.count>0" class="tip-num">{{find.count}}</span>
					</div>
				</li>
				<li class="find-sh-two">

				</li>
			</ul>
		</div>
		<ul class="hb-content hb-find-card">
			<li>
				<div class="title">众安马上花分期</div>
				<div class="info">众安保险深度战略合作伙伴</div>
			</li>
			<li class="find-card-r">
				<template v-if="find.creditAmount.status == 2&&find.creditAmount.temp">
					<div class="lable">
						您的可用额度
					</div>
					<div class="price">
						¥{{find.creditAmount.textstring}}
					</div>
				</template>
				<template v-else-if="(find.creditAmount.status == 0||find.creditAmount.status == 3)&&find.creditAmount.temp">
					<div class="credit">
						<span>申请额度</span>
						<span>免息分期</span>
					</div>
					<div class="go-credit" @click="MashanghuaIndex">
						<span>去申请</span>
					</div>
				</template>
				<template v-else>
					<span class="creding">额度正在审核中</span>
				</template>
			</li>
		</ul>
		<div class="swiper" v-if="find.banneR1and1.shelfItemDtos">
			<swiper height="2rem" dots-position="center" dots-class="swiper-dot" loop auto :interval=3000>
				<swiper-item class="swiper-img" v-for="(item, index) in find.banneR1and1.shelfItemDtos" :key="index">
					<div class="padding-box" @click="Tapskip(item)">
						<img :src="item.itemImgUrl">
					</div>
				</swiper-item>
			</swiper>
		</div>
		<div class="find-box" v-if="find.firsT1and1Img">
			<label>{{find.firsT1and1.shelfName}}</label>
			<div class="find-item" v-for="(item, index) in find.firsT1and1.shelfItemDtos" :key="index" @click="Tapskip(item)">
				<img :src="item.itemImgUrl" />
			</div>
		</div>
		<div class="find-box">
			<ul class="row-2" v-if="find.firsT1and2.shelfItemDtos">
				<li v-for="(item, index) in find.firsT1and2.shelfItemDtos" :key="index" @click="Tapskip(item)">
					<label>{{item.itemName}}</label>
					<div class="img-box">
						<img :src="item.itemImgUrl" />
					</div>
				</li>
			</ul>
			<ul class="row-thr" v-if="find.firsT1and3.shelfItemDtos">
				<li v-for='(item, index) in find.firsT1and3.shelfItemDtos' :key="index" @click="Tapskip(item)">
					<div class="img-box">
						<img :src="item.itemImgUrl" />
					</div>
				</li>
			</ul>
		</div>
		<div class="find-box recomment" v-if="find.twiN2and1.shelfName">

			<div class="img-box" @click="Tapskip(find.twiN2and1.shelfItemDtos[0])">
				<img :src="(find.twiN2and1.shelfItemDtos[0].itemImgUrl)" />
			</div>
			<ul class="row-2">
				<li @click="Tapskip(find.twiN2and1.shelfItemDtos[1])">
					<img :src="(find.twiN2and1.shelfItemDtos[1].itemImgUrl)" />
				</li>
				<li @click="Tapskip(find.twiN2and1.shelfItemDtos[2])">
					<img :src="(find.twiN2and1.shelfItemDtos[2].itemImgUrl)" />
				</li>
			</ul>
		</div>
		<div class="find-box preference" v-if="find.twiN2and2">
			<label>
          {{find.twiN2and2.shelfName}}
          <span class="more" @click="Tapskip(find.twiN2and2.shelfItemDtos[1])">更多</span>
        </label>
			<div class="goods-box">
				<div class='goods-warp'>
					<div class="goods-item" v-for="(item, index) in find.recordListone" :key="index" @click="toGoodsDetail(item)">
						<div class='labs flex flex-r flex-item-v-center'>
					        <span class='flex flex-item-center' v-for="(itemi,index) in item.goodsLabels"  v-bind:style='{backgroundColor: itemi.labelBackColor,color:itemi.labelColor}'>{{itemi.labelName}}</span>
					    </div>
						<div class="img-box">
							<img :src="item.attaUrl" />
						</div>
						<div class="goods-content">
							<label class="ecs">{{item.goodsName}}</label>
							<div class="price-box">
								优惠价：<span class="price">￥{{item.price|fixedTwo()}}</span>
							</div>
							<div class="base-price">
								月供：<span class="base-price-span">￥{{item.installmentAmount|fixedTwo()}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="swiper" v-if="find.banneR2and1.shelfItemDtos">
			<swiper height="1.5rem" dots-position="center" dots-class="swiper-dot" loop auto :interval="2000">
				<swiper-item class="swiper-img" v-for="(item, index) in find.banneR2and1.shelfItemDtos" :key="index">
					<div class="padding-box min" @click="Tapskip(item)">
						<img :src="item.itemImgUrl">
					</div>
				</swiper-item>
			</swiper>
		</div>
		<div class="find-box hot-day">
			<label>
          	{{find.twiN2and3.shelfName}}
        </label>
			<div class="hot">
				<ul class="hot-goods">
					<li class="hot-item" v-for="(item, index) in find.recordListtwo" :key="index" @click="toGoodsDetail(item)">
						<div class='labs flex flex-r flex-item-v-center'>
					        <span class='flex flex-item-center' v-for="(itemi,index) in item.goodsLabels"  v-bind:style='{backgroundColor: itemi.labelBackColor,color:itemi.labelColor}'>{{itemi.labelName}}</span>
					    </div>
						<div class="img-box">
							<img :src="item.attaUrl" />
						</div>
						<div class="info-box">
							<div class="title ecs">{{item.goodsName}}</div>
							<div class="goods-content">
								<div class="price-box">
									全额付：<span class="price">￥{{item.price|fixedTwo()}}</span>
								</div>
								<div class="base-price">
									月供：<span class="base-price-span">￥{{item.installmentAmount|fixedTwo()}}</span>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<img v-show="top" @click="totop" class="totop" src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/gotop.png"/>
		<hua-footer></hua-footer>
	</div>
</div>
</template>
<script type="text/javascript">
	import HuaFooter from '@/components/huabanShop/footer'
	import http from '@/util/http'
	import Api from '@/util/api'
	import utils from '@/util/util'
	import { Swiper, SwiperItem, Scroller } from 'vux';
	import mScroll from 'mescroll';
	import "mescroll/src/mescroll.min.css";
	import { mapState, mapMutations, mapActions } from 'vuex'
	export default {
		components: {
			Swiper,
			SwiperItem,
			Scroller,
			HuaFooter
		},
		data() {
			return {
				isShow: false,
				mScroll: null,
				marginrpx: -8,
				pageNum: 1,
				userInfo: utils.getUserInfo()
				,top:false
			}
		},
		created: function() {
			if(this.userInfo){
				this.getmessagecount({
					state: "NOTREAD",
					userId:this.userInfo.user.id
				});
			}
			this.queryhome();
			this.setcreditAmount(this.userInfo);
			this.setscrollTop = 88 / 750 * (window.innerWidth > 750 ? 750 : window.innerWidth);
		},
		mounted() {
			var self = this;
			self.mescroll = new mScroll("mescroll", {
				down: {
					callback: self.downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
				},
				up: {
					callback: self.upCallback, //上拉加载的回调
					isBounce: true //如果您的项目是在iOS的微信,QQ,Safari等浏览器访问的,建议配置此项.解析(必读)
						,
					offset: 50,
					onScroll: (mescroll, scrollTop, isUp) => {
						if(scrollTop >= this.setscrollTop) {
							this.marginrpx=0
						} else {
							this.marginrpx=-8
						}
						if (scrollTop < 700) {
							this.top = false;
						}else{
							this.top = true;
						}
					}
				}
			});
		},
		computed: {
			...mapState({
				find: state => state.find
			})
		},
		methods: {
			...mapActions({
				getmessagecount: 'find/getmessagecount',
				queryhome: 'find/queryhome',
				setcreditAmount: 'find/setcreditAmount'
			}),
			...mapMutations({
				loadmore: 'find/loadmore',
				resetloadmore: 'find/resetloadmore'
			}),
			downCallback() {
				this.resetloadmore;
				this.pageNum = 1;
				if(this.userInfo){
					this.getmessagecount({
						state: "NOTREAD",
						userId:this.userInfo.user.id
					});
				}
				this.queryhome();
				this.top = false;
				this.setcreditAmount(this.userInfo);
				this.mescroll.endDownScroll(false);
				this.mescroll.endUpScroll(false);
				this.mescroll.lockUpScroll(false);
			},
			upCallback() {
				this.pageNum++;
				http.post(Api.queryGroupGoods, {
					groupId: this.find.twiN2and3.shelfItemDtos[0].groupId,
					numPerPage: 2,
					order: "asc",
					pageNum: this.pageNum
				}).then(res => {
					this.loadmore({
						data: res.data.rows,
						that: this,
						total: res.data.total
					})
				})
			},
			toSearch() {
				this.$router.push("/search?find=find");
			},
			Tapskip(data) { //轮播图点击
				console.log(data)
				var url = data.linkUrl;
				if(data.itemType == 'GOODSSHELVESTYPE') {
					if(data.tempType == 'SELF') {
						this.$router.push("/goods-shelf?shelfItemId=" + data.groupId + '&itemId=' + data.itemId + '&self=self');

					} else if(data.tempType == 'OVERSEAS') {
						this.$router.push("/goods-shelf?shelfItemId=" + data.itemId + '&OVERSEAS=OVERSEAS');
					}
				} else if(data.itemType == 'LINKTYPE') {
					this.$router.push({path:'/link-type',query:{'url': data.linkUrl}});
//this.$router.push({path:'/link-type',query:{'url': 'http://192.168.1.113:8080/#/newEnjoy?isDebug=true'}});
				} else if(data.itemType == 'SINGLE_PRODUCT') {
					this.$router.push("/goods?id=" + data.itemId+ '&isShlf=true');
				}
			},
			toGoodsDetail(item) {
				this.$router.push("/goods?id=" + item.id);
			}
			,totop() {
				this.$refs.totop.scrollTop = 0;
				this.top = false;
			}
			,toMessage(){
				if(!this.userInfo){
					this.$router.push({path:"/login",query:{'frompage':'/find'}});
					return;
				}
				this.$router.push("/message");
			}
			,MashanghuaIndex(){
				if(!this.userInfo){
					this.$router.push({path:"/login",query:{'frompage':'/find'}});
					return;
				}
				this.$router.push("/newPage/mashanghuaIndex");
			}
		},
		filters: {
			fixedTwo(price) {
				if(price) {
					return Number(price / 100).toFixed(2);
				}
				return "0.00";
			}
		}
	}
</script>
<style lang="less" rel="stylesheet/less">
	@import './index.less';
	@import '../../assets/less/main.css';
	.conformity {
		
		transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		/* Firefox 4 */
		-webkit-transition: all 0.5s ease;
		/* Safari 和 Chrome */
		-o-transition: all 0.5s ease;
		/* Opera */
		position: fixed;
		z-index: 9999;
		width: 6.90rem;
		background-color: #fff;
		height: .88rem;
		padding: 0 .30rem;
		color: #909090;
		font-size: .28rem;
		box-shadow: 0 0 .01rem #e6e6e6;
		.conformity-message {}
		.conformity-search {
			margin-left: .18rem;
		}
		.conformity-message-box,
		.conformity-search-box {
			position: relative;
			height: .50rem;
			width: .50rem;
			border-radius: .25rem;
			-webkit-border-radius: .25rem;
			-moz-border-radius: .25rem;
			background-color: #e6e6e6;
		}
		.money {
			padding-top: .05rem;
			font-size: .28rem;
			font-weight: 400;
			color: #464646;
			padding-left: .1rem;
		}
		.usable {
			font-size: .28rem;
		}
		.btn-allowance button {
			height: .6rem;
			width: 1.40rem;
			align-items: center;
			justify-content: center;
			margin-left: .2rem;
			border-radius: .08rem;
			border: none;
			background-color: #fbc200;
			color: #464646;
			font-size: .22rem;
		}
	}
</style>